<template>

  <div class="common-layout" >
    <el-container>
      <!-- <el-header> -->
        <!-- 顶部导航栏 -->
      <div class="topbar">
        <div class="nav">
          <ul>
            <li v-if="userStore.isAuthenticated==false">
              <el-button type="text" @click="login">登录</el-button>
              <span class="sep">|</span>
              <el-button type="text" @click="register">注册</el-button>
            </li>
			<li v-if="userStore.isAuthenticated==true">
				<div>
				<el-text type="success">
					欢迎您，{{username}} 
				</el-text>
				</div>
			</li>	
			<li v-if="userStore.isAuthenticated==true">
				<div><el-button type="text" @click="logout">登出</el-button></div>
			</li>
            <li>
              <!-- Vue中借助router-link标签实现路由的切换 -->
              <router-link to="/order">我的订单</router-link>
            </li>
            <li>
              <router-link to="/collect">我的收藏</router-link>
            </li>
       <li>
              <router-link to="/notice">消息通知</router-link>
            </li>
            <li>
              <el-button type="text" @click="dzpdLogin" >个人中心</el-button>
              <!-- <router-link to="/custom">个人中心</router-link> -->
            </li>
            <li :class="getNum > 0 ? 'shopCart-full' : 'shopCart'">
              <router-link to="/shoppingCart">
                <i class="el-icon-shopping-cart-full" ></i> 购物车
                <span class="num">({{ getNum }})</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <!-- 顶部导航栏END -->
      <!-- </el-header> -->
      <!-- <el-main> -->
        <!-- 顶栏容器 -->
        <el-header>
			
        <el-menu
            
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409eff"
            router
        >
			<img src="../assets/images/weblog.png" style="height: 60px;"/>
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/all" @click="refreshAll">全部商品</el-menu-item>
		  <el-menu-item index="/types">分类浏览</el-menu-item>
      <div class="search">
            <el-input   style="max-width: 600px"
      placeholder="Please input"  class="input-with-select">
      <template #append>
        <el-button :icon="Search"   @click="searchClick"/>
      </template>
    </el-input>
  </div>
        </el-menu>
      </el-header>
	
      <!-- 顶栏容器END -->
    </el-container>
	
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'; //路由器
import { onMounted, ref } from "vue";
//--------------------------------------全局----------------------------------------：
import {useCartStore} from '@/stores/cart'//全局存储购物车
import { useAuthStore } from "@/stores";//stores目录下存储了全局状态，用于验证用户是否已经登录。

import {getCartByUid} from "@/api/shoppingcart"
import {findById} from "@/api/user"
const username = localStorage.getItem('userName')
const userStore = useAuthStore();
const cartStore  =useCartStore();


const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
if(userStore.isAuthenticated==true){
		findById(userStore.user.sub).then((res) => {
				localStorage.setItem('userName',res.data.userName);
				const username = localStorage.getItem('userName')
				})
		getCartByUid(userStore.user.sub).then((res) => {
				console.log("初始购物车！！",res.data)
				cartStore.cartList = res.data;
				})
				}

//跳转到个人中心
function dzpdLogin(){
  router.push("/custom");
}
function login(){
  router.push("/login");
}
function refreshAll(){
	  router.replace({path: '/all'});

}
function register(){
	console.log("aaaaaaaaaaaaaaaaaaa")
	 router.push("/register");
}
function logout(){
		      localStorage.clear()
			  ElMessage.success("登出成功")
		      // 跳转到登录页
			  userStore.setAuth(false);
			  userStore.setUser();
			 
			  
	}

</script>

<style>
/* 顶部导航栏CSS */
.topbar {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}

.topbar .nav {
  width: 1225px;
  background-color: #ffaaff;
  margin: 0 auto;
}

.topbar .nav ul {
  float: right;
}

.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}

.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}

.topbar .nav li .el-button {
  color: #b0b0b0;
}

.topbar .nav .el-button:hover {
  color: #fff;
}

.topbar .nav li a {
  color: #b0b0b0;
}

.topbar .nav a:hover {
  color: #fff;
}

.topbar .nav .shopCart {
  width: 120px;
  background: #424242;
}

.topbar .nav .shopCart:hover {
  background: #fff;
}

.topbar .nav .shopCart:hover a {
  color: #ff6700;
}

.topbar .nav .shopCart-full {
  width: 120px;
  background: #ff6700;
}

.topbar .nav .shopCart-full a {
  color: white;
}

/* 顶部导航栏CSS END */

/* 顶栏容器CSS */
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}

.search{
  position: relative;
  left: 700px;
  top: 16px;
}


/* 顶栏容器CSS END */
</style>
